<!-- 出维修确认页面 -->
<template>
  <div>
    <basic-container>
      <el-row style="margin-bottom: 20px">
        <el-tabs type="border-card" class="informationLabel">
          <el-tab-pane label="预警处理查询">
            <el-col :span="20">
              <avue-form ref="searchForm" v-model="searchForm" :option="searchOption" @reset-change="emptytSearch" @submit="searchSubmit">
                <template slot="productSequenceNumber">
                  <el-input
                    ref="sequenceNumberProperties"
                    @keyup.enter.native="enterProductSequenceNumber(searchForm.productSequenceNumber)"
                    placeholder="请输入产品序列号"
                    v-model="searchForm.productSequenceNumber"
                    clearable
                  >
                  </el-input>
                </template>
              </avue-form>
            </el-col>
            <el-col :span="4" style="padding-left: 20px">
              <div class="statistics">
                <div class="content">
                  <span>待处理：</span><span>{{ pendingExceptionCount }}</span>
                </div>
                <div class="content">
                  <span>今新增：</span><span>{{ todayNewExceptionCount }}</span>
                </div>
                <div class="content">
                  <span>今处理：</span><span>{{ todayHandledExceptionCount }}</span>
                </div>
              </div>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-tabs type="border-card" class="informationLabel" v-model="activeName">
            <el-tab-pane label="待处理明细" name="1">
              <avue-crud
                v-if="activeName == 1"
                :option="option"
                :table-loading="loading"
                :search.sync="search"
                :data="data"
                :page.sync="page"
                :before-open="beforeOpen"
                v-model="form"
                ref="crud"
                @search-change="searchChange"
                @search-reset="searchReset"
                @selection-change="selectionChange"
                @current-change="currentChange"
                @size-change="sizeChange"
                @refresh-change="refreshChange"
                @on-load="onLoad"
              >
                <template slot="menuLeft">
                  <el-button type="warning" size="small" icon="el-icon-download" @click="$refs.exportComp.visible = true">导 出</el-button>
                </template>
                <template slot-scope="{ row }" slot="menu">
                  <el-button icon="el-icon-view" size="small" type="text" @click="rowView(row)">详情</el-button>
                  <el-button
                    icon="el-icon-view"
                    size="small"
                    type="text"
                    :disabled="row.isExceptionHandling"
                    v-if="permission.earlyWarningHandle_abnormalHandle"
                    @click="abnormalHandle(row)"
                    >异常处理</el-button
                  >
                </template>
                <template slot="menuRight">
                  <user-table-config :option="option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>
                </template>
              </avue-crud>
            </el-tab-pane>
            <el-tab-pane label="已处理明细" name="2">
              <avue-crud
                v-if="activeName == 2"
                :option="option"
                :table-loading="loading"
                :search.sync="search"
                :data="data"
                :page.sync="page"
                :before-open="beforeOpen"
                v-model="form"
                ref="crud"
                @search-change="searchChange"
                @search-reset="searchReset"
                @selection-change="selectionChange"
                @current-change="currentChange"
                @size-change="sizeChange"
                @refresh-change="refreshChange"
                @on-load="onLoad"
              >
                <template slot="menuLeft">
                  <el-button type="warning" size="small" icon="el-icon-download" @click="$refs.exportComp.visible = true">导 出</el-button>
                </template>
                <template slot-scope="{ row }" slot="menu">
                  <el-button icon="el-icon-view" size="small" type="text" @click="rowView(row)">详情</el-button>
                  <el-button icon="el-icon-view" size="small" type="text" :disabled="row.isExceptionHandling" @click="abnormalHandle(row)">异常处理</el-button>
                </template>
                <template slot="menuRight">
                  <user-table-config :option="option" @confirm="(val) => handleSetUserConfig(val, pageCode)"></user-table-config>
                </template>
              </avue-crud>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-dialog :title="detailTitle" :visible.sync="detailDialog" :modal-append-to-body="false" @close="closeDialog">
        <div class="sail-header-dialog-content">
          <avue-form ref="detailForm" v-model="detailForm" :option="detailOption"></avue-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" icon="el-icon-delete" @click="detailDialog = false">取 消</el-button>
          <el-button size="small" type="primary" icon="el-icon-check" v-preventReClick @click="submit">提 交</el-button>
        </span>
      </el-dialog>
      <export-comp
        ref="exportComp"
        page-api-url="mes-alert/strategy-message/warning-process-page"
        :option="option"
        :page="page"
        :query="query"
        file-name="预警处理"
      ></export-comp>
    </basic-container>
  </div>
</template>

<script>
import repairDetail from '@/components/repair/detail.vue';
import { getList, getWarningProcessCount, getDetail, getAltStrategyType, atrategyMessageSubmit, getModule } from '@/api/earlyWarning/earlyWarningHandle.js';
import { mapGetters } from 'vuex';
import userTableConfig from '@/components/user-table-config';
import userConfig from '@/mixins/userConfig';
import exportComp from '@/components/export-comp';

export default {
  name: 'EarlyWarningHandle',
  components: {
    repairDetail,
    userTableConfig,
    exportComp
  },
  mixins: [userConfig()],
  data() {
    return {
      activeName: '1',
      search: {},
      query: {},
      loading: true,
      page: {
        pageSize: 15,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      searchForm: {},
      searchOption: {
        submitBtn: true,
        submitText: '搜索',
        emptyBtn: true,
        emptyText: '清空',
        labelWidth: 115,
        menuPosition: 'right',
        span: 8,
        column: [
          {
            label: '消息名称',
            prop: 'strategyName'
          },
          {
            label: '消息类型',
            prop: 'strategyType',
            type: 'select',
            dicData: [],
            change: (val) => {
              if (val.value) {
                //获取预警策略指标字典
                let metricId = this.findObject(this.searchOption.column, 'metricId');
                getModule(val.value).then(
                  (res) => {
                    let data = this._get(res, 'data.data', []);
                    metricId.dicData = this._map(data, (item) => {
                      item.children = this._map(item.children, (childrenItem) => {
                        return {
                          label: childrenItem.value,
                          value: childrenItem.id
                        };
                      });
                      return {
                        label: item.value,
                        value: item.key,
                        children: item.children
                      };
                    });
                  },
                  (error) => {
                    metricId.dicData = [];
                  }
                );
              }
            }
          },
          {
            label: '指标/事件',
            prop: 'metricId',
            type: 'cascader',
            dicData: []
          },
          {
            label: '提醒日期',
            prop: 'warningTime',
            type: 'datetimerange',
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            searchRules: [
              {
                required: true,
                message: '请选择维修时间',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '描述',
            prop: 'content'
          }
        ]
      },
      option: {
        height: 'calc(100vh - 576px)',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 3,
        border: true,
        index: true,
        indexLabel: '序号',
        selection: true,
        dialogClickModal: false,
        labelWidth: 120,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        columnBtn: false,
        column: [
          {
            label: '消息编码',
            prop: 'strategyCode'
          },
          {
            label: '消息名称',
            prop: 'strategyName'
          },
          {
            label: '消息类型',
            prop: 'strategyType',
            type: 'select',
            dicData: [],
            change: (val) => {
              if (val.value) {
                //获取预警策略指标字典
                let metricId = this.findObject(this.option.column, 'metricId');
                getModule(val.value).then(
                  (res) => {
                    let data = this._get(res, 'data.data', []);
                    metricId.dicData = this._map(data, (item) => {
                      item.children = this._map(item.children, (childrenItem) => {
                        return {
                          label: childrenItem.value,
                          value: childrenItem.id
                        };
                      });
                      return {
                        label: item.value,
                        value: item.key,
                        children: item.children
                      };
                    });
                  },
                  (error) => {
                    metricId.dicData = [];
                  }
                );
              }
            }
          },
          {
            label: '指标/事件',
            prop: 'metricId',
            hide: true,
            type: 'cascader',
            dicData: []
          },
          {
            label: '指标/事件',
            prop: 'metricName'
          },
          {
            label: '描述',
            prop: 'content',
            span: 24,
            type: 'textarea',
            rows: 3,
            overHidden: true
          },
          {
            label: '通知方式',
            prop: 'notifyType',
            type: 'select',
            dicData: [{ label: '邮件', value: 'EMAIL' }]
          },
          {
            label: '提醒日期',
            prop: 'warningTime',
            type: 'date',
            searchType: 'datetimerange',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
          },
          {
            label: '是否异常处理',
            prop: 'isExceptionHandling',
            type: 'select',
            dicData: [
              { label: '是', value: true },
              { label: '否', value: false }
            ]
          }
        ]
      },
      data: [],
      pendingExceptionCount: '',
      todayNewExceptionCount: '',
      todayHandledExceptionCount: '',
      detailDialog: false,
      detailTitle: '',
      detailOption: {
        submitBtn: false,
        emptyBtn: false,
        labelWidth: 120,
        group: [
          {
            label: '事件信息',
            prop: 'baseInfo',
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '消息编码',
                prop: 'strategyCode',
                disabled: true
              },
              {
                label: '消息名称',
                prop: 'strategyName',
                disabled: true
              },
              {
                label: '消息类型',
                prop: 'strategyType',
                type: 'select',
                dicData: [],
                disabled: true,
                change: (val) => {
                  if (val.value) {
                    //获取预警策略指标字典
                    let metricId = this.findObject(this.detailOption.group[0].column, 'metricId');
                    getModule(val.value).then(
                      (res) => {
                        let data = this._get(res, 'data.data', []);
                        metricId.dicData = this._map(data, (item) => {
                          item.children = this._map(item.children, (childrenItem) => {
                            return {
                              label: childrenItem.value,
                              value: childrenItem.id
                            };
                          });
                          return {
                            label: item.value,
                            value: item.key,
                            children: item.children
                          };
                        });
                      },
                      (error) => {
                        metricId.dicData = [];
                      }
                    );
                  }
                }
              },
              {
                label: '预警指标',
                prop: 'metricName',
                disabled: true
              },
              {
                label: '通知方式',
                prop: 'notifyType',
                type: 'select',
                dicData: [{ label: '邮件', value: 'EMAIL' }],
                disabled: true
              },
              {
                label: '提醒时间',
                prop: 'warningTime',
                type: 'date',
                searchType: 'datetimerange',
                format: 'yyyy-MM-dd',
                valueFormat: 'yyyy-MM-dd',
                startPlaceholder: '开始日期',
                endPlaceholder: '结束日期',
                disabled: true
              },
              {
                label: '异常描述',
                prop: 'content',
                span: 24,
                type: 'textarea',
                rows: 3,
                disabled: true
              }
            ]
          },
          {
            label: '异常处理',
            prop: 'abnormalInfo',
            icon: 'el-icon-vertical-bar',
            column: [
              {
                label: '是否异常处理',
                prop: 'isExceptionHandling',
                display: false,
                disabled: true,
                type: 'select',
                dicData: [
                  { label: '是', value: true },
                  { label: '否', value: false }
                ]
              },
              {
                label: '异常处理人',
                prop: 'exceptionHandlingUserName',
                display: false,
                disabled: true
              },
              {
                label: '异常处理时间',
                prop: 'exceptionHandlingTime',
                span: 24,
                display: false,
                disabled: true
              },
              {
                label: '分析原因',
                prop: 'analysisReason',
                span: 24,
                type: 'textarea',
                rows: 3,
                disabled: true,
                rules: [
                  {
                    required: true,
                    message: '请输入分析原因',
                    trigger: 'blur'
                  }
                ]
              },
              {
                label: '备注',
                prop: 'remark',
                span: 24,
                type: 'textarea',
                rows: 3,
                disabled: true
              }
            ]
          }
        ]
      },
      detailForm: {}
    };
  },
  computed: {
    ...mapGetters(['permission']),
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids;
    }
  },
  watch: {},
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
    //获取预警策略类型字典
    let strategyType1 = this.findObject(this.option.column, 'strategyType');
    let strategyType2 = this.findObject(this.detailOption.group[0].column, 'strategyType');
    let strategyType3 = this.findObject(this.searchOption.column, 'strategyType');
    getAltStrategyType().then(
      (res) => {
        let data = this._get(res, 'data.data', []);
        strategyType1.dicData = this._map(data, (item) => {
          return {
            label: item.dictKey,
            value: item.dictValue
          };
        });
        strategyType2.dicData = this._map(data, (item) => {
          return {
            label: item.dictKey,
            value: item.dictValue
          };
        });
        strategyType3.dicData = this._map(data, (item) => {
          return {
            label: item.dictKey,
            value: item.dictValue
          };
        });
      },
      (error) => {
        strategyType1.dicData = [];
        strategyType2.dicData = [];
        strategyType3.dicData = [];
      }
    );
  },
  methods: {
    searchSubmit(form, done) {
      if (form.metricId) {
        form.metricId = form.metricId[1];
      }
      if (form.warningTime && form.warningTime.length > 0) {
        form.startTime = form.warningTime[0];
        form.endTime = form.warningTime[1];
        delete form.warningTime;
      }
      this.query = form;
      this.page.currentPage = 1;
      this.onLoad(this.page);
      done();
    },
    emptytSearch() {
      this.searchForm = {};
      this.query = {};
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.onLoad(this.page);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.query['isExceptionHandling'] = this.activeName == '1' ? false : true;
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear();
        getWarningProcessCount().then((res) => {
          this.pendingExceptionCount = this._get(res, 'data.data.pendingExceptionCount', 0);
          this.todayNewExceptionCount = this._get(res, 'data.data.todayNewExceptionCount', 0);
          this.todayHandledExceptionCount = this._get(res, 'data.data.todayHandledExceptionCount', 0);
        });
      });
    },
    rowView(row) {
      this.detailTitle = '详情';
      this.detailDialog = true;
      this.$nextTick(() => {
        let isExceptionHandling = this.findObject(this.detailOption.group[1].column, 'isExceptionHandling');
        isExceptionHandling.display = true;
        let exceptionHandlingUserName = this.findObject(this.detailOption.group[1].column, 'exceptionHandlingUserName');
        exceptionHandlingUserName.display = true;
        let exceptionHandlingTime = this.findObject(this.detailOption.group[1].column, 'exceptionHandlingTime');
        exceptionHandlingTime.display = true;
        let analysisReason = this.findObject(this.detailOption.group[1].column, 'analysisReason');
        analysisReason.disabled = true;
        let remark = this.findObject(this.detailOption.group[1].column, 'remark');
        remark.disabled = true;
      });
      getDetail(row.id).then((res) => {
        this.detailForm = this._get(res, 'data.data', {});
      });
    },
    abnormalHandle(row) {
      this.detailTitle = '异常处理';
      this.detailDialog = true;
      this.$nextTick(() => {
        let isExceptionHandling = this.findObject(this.detailOption.group[1].column, 'isExceptionHandling');
        isExceptionHandling.display = false;
        let exceptionHandlingUserName = this.findObject(this.detailOption.group[1].column, 'exceptionHandlingUserName');
        exceptionHandlingUserName.display = false;
        let exceptionHandlingTime = this.findObject(this.detailOption.group[1].column, 'exceptionHandlingTime');
        exceptionHandlingTime.display = false;
        let analysisReason = this.findObject(this.detailOption.group[1].column, 'analysisReason');
        analysisReason.disabled = false;
        let remark = this.findObject(this.detailOption.group[1].column, 'remark');
        remark.disabled = false;
      });
      getDetail(row.id).then((res) => {
        this.detailForm = this._get(res, 'data.data', {});
      });
    },
    submit() {
      this.detailForm.isExceptionHandling = true;
      atrategyMessageSubmit(this.detailForm).then((res) => {
        this.detailDialog = false;
        this.$message.success(res.data.msg);
        this.onLoad(this.page);
      });
    },
    closeDialog() {
      this.$refs.detailForm.resetFields();
      this.detailForm = {};
    }
  }
};
</script>

<style scoped lang="scss">
.img-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
::v-deep .el-table {
  margin-bottom: 10px;
}
.tdStyle {
  background: #fafafa;
  font-weight: 700;
  color: #909399;
  text-align: right;
  width: auto;
  padding-right: 20px;
  white-space: nowrap;
}
.tdStyle2 {
  white-space: nowrap;
  background: #fafafa;
  font-weight: 700;
  padding: 0 10px;
}
.tdStyle3 {
  text-align: center;
}
td {
  padding: 5px;
  border: 1px solid #ebeef5;
}

::v-deep .el-table .repair-select-row {
  background-color: #caf982 !important;
}
.detail-title {
  font-weight: bold;
  font-size: 14px;
  margin: 10px 0;
}
.detail-title.noData {
  text-align: center;
}
.statistics {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  justify-content: space-around;
  font-size: 18px;
  align-items: center;
  .content {
    padding: 10px;
    font-size: 20px;
    .repairStraightThroughRate {
      color: yellowgreen;
    }
    .returnsWorkRate {
      color: orange;
    }
    .scrapeRate {
      color: red;
    }
  }
}
.repairWay {
  display: flex;
  flex-direction: column;
}

.station {
  display: flex;
  flex-direction: row;
}

::v-deep .el-dialog__wrapper .el-dialog {
  .avue-crud__menu {
    display: none;
  }
}
</style>
